require('./Fileselect.styl');
const { Group, TextField, Boxs, Toast, NumberPicker, Button, Dialog } = SaltUI;
const { HBox, Box } = Boxs;
const Getfilepathlist = require('components/getfilepathlist')
const File = require('images/svg/file.svg');
const Photo = require('images/svg/photo.svg');
const Upload = require('images/svg/upload.svg');
const Interrogation = require('images/svg/interrogation.svg');
const FileData = require('./FileData');
const classNames = require("classnames");
const notice_info = require('./notice.json');

class Fileselect extends React.Component {
    static defaultProps = {
        fileData: new FileData()
    }
    constructor(props) {
        super(props);
        this.state = {
            active: false,
            pathdata: [],//路径数据
            pathname: '',//路径名称
            upfileName: [],//文件上传
            upimageName: [],//图片上传
            a: 1,
            b: 0,
            c: 0,
            version: !this.props.version ? 'V1.0.0' : '',
            hide: false
        };
        this.isActive = true,//版本号的输入是否正确
            this.handleClickUp = this.handleClickUp.bind(this);
        this.handleCancleCb = this.handleCancleCb.bind(this);
        this.handleClickStep = this.handleClickStep.bind(this);
        this.handleClickPass = this.handleClickPass.bind(this);
        this.handleMultiLines = this.handleMultiLines.bind(this);
        this.handlePop = this.handlePop.bind(this);
    }
    handleMultiLines() {
        if (this.props.message)
            var key = this.props.message.split("-");
        // debugger
        Dialog.alert({
            title: '提示',
            content: `${notice_info[key[0]][key[1]]}`,
            onConfirm() {
                console.log('multi lines confirm');
            },
        });
    }
    //文本输入
    handleTextChange(name, newValue) {
        //console.log(this.state)
        // debugge
        if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "请先选择所属项目名称",
            });
            return;
        }
        if ((name == 'a' || name == 'b' || name == 'c') && newValue - 0 != newValue - 0) {
            Toast.show({
                type: 'error',
                content: "请在版本号中输入数字",
            });
            return;
        }
        this.setState({
            [name]: newValue
        }, () => {
            if (name == 'a' || name == 'b' || name == 'c') {
                let version = 'V' + this.state.a + '.' + this.state.b + '.' + this.state.c;
                this.setState({ version })
            }
        });
    }
    //失去焦点时检验
    handleBlur(name, newValue) {
        if (name == 'version') {//版本号的校验
            if (newValue.indexOf('.') == -1) {
                Toast.show({
                    type: 'error',
                    content: '请输入带小数点的版本号（例：1.0）'
                })
                this.isActive = false
            } else {
                this.isActive = true
            }
        }
    }
    //选择目录取消功能-返回内容页
    handleCancleCb(folder_id) {
        this.state.folder_id = folder_id;
        this.setState({ active: false }, () => {
            this.props.fileData.fetchFilePaths({ folder_id }, (list) => {
                this.setState({
                    pathdata: list
                })
            });
        });
    }
    //选择目录前进-点击文件夹
    handleClickStep(folder_id, path_name) {
        if (folder_id) {
            this.home = false;
            this.props.fileData.fetchFilePaths({ folder_id }, (list) => {
                this.setState({
                    pathdata: list,
                    path_name,
                    folder_id
                })
            })
        }
    }
    //选中文件路径
    handleClickPass(params) {
        this.setState({ pathname: params.title }, () => {
            this.pass_folder_id = params.folder_id;
            this.props.setPathName && this.props.setPathName(params.title)
        });
    }
    //点击云盘按钮
    handleClickUp() {
        if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "请先选择所属项目名称",
            });
            return;
        }
        this.isActive && this.setState({ active: true }, () => {
            this.home = true;
            this.props.fileData.fetchFilePaths({ folder_id: this.state.folder_id }, (list) => {
                this.setState({
                    pathdata: list
                })
            })
        });
    }
    //上传文件
    upFile(type) {
        if (this.state.proName) {
            var formData = null
            if (type == "image") {
                formData = new FormData(this.refs.imageForm);
            } else {
                formData = new FormData(this.refs.fileForm);
            }
            // if (!this.props.version && (type == 'file' && this.state.upfileName.length == 1)) {
            //     Toast.show({
            //         type: 'error',
            //         content: "只能传一个文件",
            //     });
            //     return;
            // }
            if (!this.props.fold && !this.state.pathname) {
                Toast.show({
                    type: 'error',
                    content: "文件存储区域未选择",
                });
                return;
            }
            // if (!this.props.version && !this.state.version) {
            //     Toast.show({
            //         type: 'error',
            //         content: "文件版本号未选择",
            //     });
            //     return;
            // }
            this.props.fileData.upFiles({ name: this.state.proName.text ? this.state.proName.text : this.state.proName, version: this.state.version, folder_id: this.props.process_folder ? 0 : this.state.folder_id }, formData, this.refs.processShow, (data) => {
                if (type == "image") {
                    this.setState({
                        upimageName: data
                    });
                } else {
                    let arr = this.state.upfileName;
                    arr.push(data[0]);
                    data = arr;
                    this.setState({
                        upfileName: data
                    });
                }
                data[data.length - 1].selected_folder_Id = this.pass_folder_id;
                data[data.length - 1].selected_folder_pathname = this.state.pathname;
                data[data.length - 1].root_folder_Id = this.root_folder_Id;
                this.fileData = data;
                this.props.getFileData && this.props.getFileData(type, data, this.state.pathname);
            });
        } else if (!this.state.proName) {
            Toast.show({
                type: 'error',
                content: "请先选择所属项目名称",
            });
        } else if (!this.state.version) {
            if (!this.props.version) {
                Toast.show({
                    type: 'error',
                    content: "请先输入附件版本",
                });
            }
        }
    }
    //删除文件
    deleteFile(type, fileid, e) {
        // debugger
        let t = this;
        var upfileHandle = null
        if (type == "file") {
            upfileHandle = t.state.upfileName;
        } else {
            upfileHandle = t.state.upimageName;
        }
        t.props.fileData.delFiles(fileid, (id) => {
            upfileHandle = upfileHandle.filter(item => item.fileId != id)
            // for (var i = 0; i < upfileHandle.length; i++) {
            //     if (upfileHandle[i].fileId == id) {
            //         upfileHandle = upfileHandle.splice(i, 1)
            //     }
            // }
            if (type == "file") {
                t.setState({
                    upfileName: upfileHandle
                })
            } else {
                t.setState({
                    upimageName: upfileHandle
                })
            }
        })
    }
    handlePop() {
        this.setState({ hide: true })
    }
    render() {
        let t = this;
        return (
            <div className="fileselect" onClick={t.handlePop}>
                <div className="processShow" ref="processShow"> </div>
                {
                    !this.props.version &&
                    <Group.List>
                        {/* <TextField
                            label="附件版本号"
                            placeholder="请通过选择输入成果附件版本号"
                            value={t.state.version}
                            onChange={t.handleTextChange.bind(t, 'version')}
                            readOnly={true}
                        />
                        <HBox >
                            <Box flex={3} >
                                <HBox vAlign="center" >
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.a} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'a')} />
                                    </Box>
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.b} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'b')} />
                                    </Box>
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.c} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'c')} />
                                    </Box>
                                </HBox>
                            </Box>
                        </HBox> */}
                        <HBox vAlign="center">
                            <Box flex={1} className="t-PL15 version_label" >
                                附件版本号
                            </Box>
                            <Box flex={3} >
                                <HBox vAlign="center" >
                                    <span className="version_label">V</span>
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.a} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'a')} />
                                    </Box>
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.b} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'b')} />
                                    </Box>
                                    <Box flex={1} className="t-FAR">
                                        <NumberPicker value={t.state.c} useTouch={!window.isBp ? !DingTalkPC.ua.isDesktop : false} min={0} max={9} step={1} onChange={t.handleTextChange.bind(t, 'c')} />
                                    </Box>
                                </HBox>
                            </Box>
                        </HBox>
                    </Group.List>
                }
                {!this.props.fold && <Group.List>
                    <HBox>
                        <Box flex={3}>
                            <TextField
                                label="文件存储区域"
                                value={t.state.pathname || t.state.upfileName}
                                readOnly={true}
                            />
                        </Box>
                        <Box flex={1} onClick={this.handleClickUp}>
                            <Upload height="24" width="20" className="file-Form-Icon" />
                        </Box>
                    </HBox>
                </Group.List>}
                <div className="processShow" ref="processShow"> </div>
                <Group.List>
                    <HBox className={classNames("hideImage", { "isShow": this.props.isShow })}>
                        <Box flex={0.5}>
                            <TextField
                                label="上传图片"
                                readOnly={true}
                            />
                        </Box>
                        <Box flex={1}>
                            {/* <Interrogation height="20" width="18" className="interrogation" /> */}
                            <form className="image-Form" ref="imageForm">
                                <input type="file" value="" name="file" className="image-Input" accept="image/*" ref="imageInput" onChange={this.upFile.bind(t, 'image')} />
                            </form>
                            <Photo height="20" width="18" className="image-Form-Icon" />
                        </Box>
                    </HBox>
                    <div style={{ textAlign: "center", paddingTop: '10px', background: '#f8f8f8' }} className={classNames("hideImage", { "isShow": this.props.isShow })}>
                        {this.state.upimageName.length > 0 && this.state.upimageName.map((item) => {
                            return (<a className="fileshow" data-title={item.fileId} onClick={this.deleteFile.bind(t, "image", item.fileId)}>{item.fileName}<span>版本号：{this.state.version}</span></a>)
                        })}
                    </div>
                    <HBox>
                        <Box flex={0.5}>
                            <TextField
                                label="上传附件"
                                readOnly={true}
                            />
                        </Box>
                        <Box flex={1}>
                            {/* <span className={classNames("popover", { hide: t.state.hide })} >如若对上传路径不清楚,请点击查询</span> */}
                            <span className="interrogation" onClick={this.handleMultiLines}><Interrogation height="20" width="18" />疑问</span>
                            <form className="file-Form" ref="fileForm">
                                <input type="file" value="" name="file" className="file-Input" onChange={this.upFile.bind(t, "file")} />
                            </form>
                            <File height="20" width="18" className="file-Form-Icon" />
                        </Box>
                    </HBox>
                </Group.List>
                <div style={{ textAlign: "center", marginBottom: '10px' }}>
                    {this.state.upfileName.length > 0 && this.state.upfileName.map((item) => {
                        return (<div className="fileshow" data-title={item.fileId} onClick={this.deleteFile.bind(t, 'file', item.fileId)} >{item.fileName}<span className={classNames("verson_show", { "isverson_show": !this.state.version })}>版本号：{this.state.version ? this.state.version : ""}</span></div>)
                    })}
                </div>
                <Getfilepathlist
                    active={this.state.active}
                    data={this.state.pathdata}
                    handleCancleCb={this.handleCancleCb}
                    step={this.handleClickStep}
                    folder_id={this.state.folder_id}
                    path_name={this.state.path_name}
                    pass={this.handleClickPass}
                    home={this.home}
                />

            </div >
        );
    }

    componentWillMount() {
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            proName: nextProps.proName || this.state.proName,
            edit: nextProps.edit || this.state.edit,
            pathname: nextProps.path_name || this.state.pathname,
            // pathdata: nextProps.pathdata,
            folder_id: nextProps.folder_id || this.state.folder_id,
            upfileName: nextProps.upfileName.length > 0 ? nextProps.upfileName : this.state.upfileName,
            upimageName: nextProps.upimageName ? nextProps.upimageName : this.state.upimageName,
            version: (nextProps.upfileName && nextProps.upfileName.length > 0) ? nextProps.upfileName[0].file_version : this.state.version,
        }, () => {
            this.root_folder_Id = this.state.folder_id;
            // this.setState({ pathname: nextProps.path_name })
        });
        this.fileData = nextProps.upfileName.length > 0 ? nextProps.upfileName : this.state.upfileName;
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        // ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
        //     if (isSuccessed) {
        //         Control.go(-1);
        //     }
        // })
        Dialog.hide();
    }
}

module.exports = Fileselect;
